<template>
  <view class="tab-bar" :style="{ height: tabBarHeight + 'px' }">
    <!-- 普通用户导航栏 -->
    <view v-if="!userStore.isMerchant() && !userStore.isAdmin()" class="tab-bar-content">
      <view 
        v-for="(item, index) in userTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(item.pagePath, index)"
      >
        <image 
          :src="currentTab === index ? item.selectedIconPath : item.iconPath" 
          class="tab-icon"
        ></image>
        <text class="tab-text" :class="{ 'active-text': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
    
    <!-- 商家导航栏 -->
    <view v-else-if="userStore.isMerchant() && !userStore.isAdmin()" class="tab-bar-content">
      <view 
        v-for="(item, index) in merchantTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(item.pagePath, index)"
      >
        <image 
          :src="currentTab === index ? item.selectedIconPath : item.iconPath" 
          class="tab-icon"
        ></image>
        <text class="tab-text" :class="{ 'active-text': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>

    <!-- 管理员导航栏 -->
    <view v-else-if="userStore.isAdmin()" class="tab-bar-content">
      <view 
        v-for="(item, index) in adminTabs" 
        :key="index"
        class="tab-item"
        :class="{ active: currentTab === index }"
        @click="switchTab(item.pagePath, index)"
      >
        <image 
          :src="currentTab === index ? item.selectedIconPath : item.iconPath" 
          class="tab-icon"
        ></image>
        <text class="tab-text" :class="{ 'active-text': currentTab === index }">{{ item.text }}</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, onMounted, watch, computed } from 'vue';
import { useUserStore } from '@/store/user';

const props = defineProps({
  active: {
    type: Number,
    default: 0
  }
});

const userStore = useUserStore();
const currentTab = ref(props.active);
const tabBarHeight = ref(50); // 默认高度

// 定义一个计算属性来决定使用哪个 tab 数组
const tabs = computed(() => {
  if (!userStore.isMerchant() && !userStore.isAdmin()) {
    return userTabs;
  } else if (userStore.isMerchant() && !userStore.isAdmin()) {
    return merchantTabs;
  } else if (userStore.isAdmin()) {
    return adminTabs;
  }
  return userTabs; // 默认返回 userTabs，防止出现意外情况
});

// 普通用户的导航栏配置
const userTabs = [
  {
    pagePath: '/pages/index/index',
    text: '首页',
    iconPath: '/static/tabbar/home.png',
    selectedIconPath: '/static/tabbar/home-active.png'
  },
  {
    pagePath: '/pages/cart/index',
    text: '购物车',
    iconPath: '/static/tabbar/cart.png',
    selectedIconPath: '/static/tabbar/cart-active.png'
  },
  {
    pagePath: '/pages/my/index',
    text: '我的',
    iconPath: '/static/tabbar/my.png',
    selectedIconPath: '/static/tabbar/my-active.png'
  }
];

// 商家的导航栏配置
const merchantTabs = [
  {
    pagePath: '/pages/merchant/dashboard',
    text: '仪表盘',
    iconPath: '/static/tabbar/dashboard.png',
    selectedIconPath: '/static/tabbar/dashboard-active.png'
  },
  {
    pagePath: '/pages/merchant/orders',
    text: '商品评价',
    iconPath: '/static/tabbar/orders.png',
    selectedIconPath: '/static/tabbar/orders-active.png'
  },
  // {
  //   pagePath: '/pages/merchant/products',
  //   text: '商品',
  //   iconPath: '/static/tabbar/products.png',
  //   selectedIconPath: '/static/tabbar/products-active.png'
  // },
  {
    pagePath: '/pages/merchant/settings',
    text: '我的',
    iconPath: '/static/tabbar/settings.png',
    selectedIconPath: '/static/tabbar/settings-active.png'
  }
];

// 管理员的导航栏配置
const adminTabs = [
  {
    pagePath: '/pages/orders/orders',
    text: '订单管理',
    iconPath: '/static/tabbar/orders.png',
    selectedIconPath: '/static/tabbar/orders-active.png'
  },
  {
    pagePath: '/pages/products/products',
    text: '商品管理',
    iconPath: '/static/tabbar/products.png',
    selectedIconPath: '/static/tabbar/products-active.png'
  },
  {
    pagePath: '/pages/users/users',
    text: '角色管理',
    iconPath: '/static/tabbar/users.png',
    selectedIconPath: '/static/tabbar/users-active.png'
  },
  {
    pagePath: '/pages/settings/settings',
    text: '个人信息',
    iconPath: '/static/tabbar/settings.png',
    selectedIconPath: '/static/tabbar/settings-active.png'
  }
];

// 切换标签页
const switchTab = (url, index) => {
  currentTab.value = index;
  // uni.switchTab({ url});
  uni.redirectTo({
  	url :url 
  })
};

// 监听props变化
watch(() => props.active, (newVal) => {
  currentTab.value = newVal;
});

// 获取系统信息，计算安全区域
onMounted(() => {
  uni.getSystemInfo({
    success: (res) => {
      // 考虑底部安全区域（如iPhone X及以上机型）
      const safeAreaBottom = res.safeAreaInsets ? res.safeAreaInsets.bottom : 0;
      tabBarHeight.value = 50 + safeAreaBottom;
    }
  });
});


</script>

<style>
.tab-bar {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: #ffffff;
  box-shadow: 0 -1px 5px rgba(0, 0, 0, 0.1);
  z-index: 999;
}

.tab-bar-content {
  display: flex;
  height: 50px;
}

.tab-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.tab-icon {
  width: 24px;
  height: 24px;
  margin-bottom: 2px;
}

.tab-text {
  font-size: 10px;
  color: #666666;
}

.active-text {
  color: #ff4400;
}
</style>